<template>
  <div id="bue">
    <el-tabs stretch type="card" label disabled editable @edit="handleClick" @tab-click="hade">
      <!-- <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>-->
      <el-tab-pane
        v-for="(item) in add"
        :key="item.title"
        :label="item.title"
        :name="item.name"
      >{{item.name}}</el-tab-pane>
    </el-tabs>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "bue",
  components: {},
  data() {
    return {
      //   activeName: "first",
      add: [
        { title: "用户管理", name: "first" },
        { title: "配置管理", name: "second" },
        { title: "角色管理", name: "third" },
        { title: "定时任务补偿", name: "fourth" },
        { title: "是", name: "t1" },
        { title: "接口", name: "t2" },
        { title: "哦哦", name: "t3" },
        { title: "的", name: "t4" }
      ]
    };
  },
  created() {},
  methods: {
    handleClick(targetName, action) {
      if (action == "remove") {
        for (let i = 0; i < this.add.length; i++) {
          if (this.add[i].name == targetName) {
            this.add.splice(i, 1);
            console.log(this.add);
          }
        }
      }
      console.log(targetName, action);
    },
    hade(tab) {
      console.log(tab.name);
      switch (tab.name) {
        case "first":
          this.$router.push({
            path: "/index/bue/buechildren1"
          });
          break;
        case "second":
          this.$router.push({
            path: "/index/bue/buechildren2"
          });
          break;
        case "third":
          this.$router.push({
            path: "/index/bue/buechildren3"
          });
          break;
      }
    }
  }
};
</script>
<style scope>
.el-tabs__content {
  display: none;
}
</style>